/* Drop Downs */

header {
	/*Icon should be white when there is a notification*/
	a.hasnotifications {color:#fff !important;}

	.toolbar .dropdown, #headerbardropdown, #rightmenu-trigger {
		border-left: 1px solid @navbar-vertical-separator;
	}
	#leftmenu-trigger {
		border-right: 1px solid @navbar-vertical-separator;
	}
}

.scrollthis {
	height: 200px; overflow-y: scroll;
	li {
	     .clearfix();
	     a {display: block; text-decoration: none;}
	}
	+ .dd-footer {border-top: 1px solid #e6e7e8;}
}

.dropdown-menu {
	&.notifications, &.messages {padding: 0; z-index: 1300;}
	&.notifications {width: 292px;}

	&.notifications li, &.messages li {
		border-bottom: 1px solid #e6e7e8;
		color: #000 !important;
		a {
			white-space: normal; color: #4D4D4D;
			&.active, &:hover {color: #1a1a1a !important; background: #f7f8fa !important}
		}
		.time {color: @grayed;font-size: 0.85em; white-space: nowrap; text-align: right; vertical-align: top}

		&.dd-header a, &.dd-footer a {color: @link-color;}
		&.dd-header {
			padding: 6px 10px; .clearfix; font-size: 0.85em;
			span:first-child {.pull-left; font-weight: 400;}
			span:last-child {
				.pull-right;
				a {padding: 0 !important;}
			}
			a {background: none !important}
			a:hover {color: @link-hover-color}
		}
		&.dd-footer {
			font-size: 0.85em;
			a {text-align: center; padding: 7px 10px;}
		}
		&:last-child {border-bottom: 0;}
	}

	&.notifications li {
		.notification-user i 	{background-color: @brand-midnightblue;}
		.notification-warning i {background-color: @brand-warning;}
		.notification-danger i 	{background-color: @brand-danger;}
		.notification-fix i 	{background-color: @brand-inverse;}
		.notification-success i {background-color: @brand-success;}
		.notification-failure i {background-color: @brand-danger;}
		.notification-order i 	{background-color: @brand-info;}
		a {
			padding: 12px 15px; 
			line-height: 16px;
			i {
				.pull-left;
				color: rgba(255, 255, 255, 1); padding: 3px 0; min-width: 20px; text-align: center; margin-top: -2px; border-radius: @border-radius-small;
			}
			.msg {overflow: hidden; padding: 0 7px; display: inline; width: 210px;}
		}
		.time {float: right;}
	}

	&.messages li {
		a {
			width: 290px; line-height: 14px;
			img {.pull-left; margin-right: 10px; height: 30px; border-radius: @border-radius-small;}
			div {overflow: hidden; position: relative;}

			padding: 15px 15px 12px;
			.name {margin-top: 0px;} .msg {padding-top: 5px;}
		}
		.time {float: right;}
		img {height:30px;width:30px;}
		span {display: block;}
		span.msg {font-size: 0.85em; color: @grayed2;}
	}

	&.userinfo {
		padding: 15px 15px 0;
		min-width: 200px;
		.clearfix();
		ul {padding-left: 0;}
		li {list-style:none;}
		h5 {margin: -2px 0 -2px 0;}

		li.username {
			.clearfix();
			margin: 0 -15px;
			padding: 0 10px 10px;
			border-bottom: 1px solid @border-darker;

			a {padding: 0 5px;}

			.pull-left img {width: 30px; border-radius: @border-radius-small;}
			.pull-right {
				min-width: 128px;
				small {
					color: @grayed2;
					span {color: @link-color}
				}
			}
		}

		.userlinks {
			ul {
				display: block;
				position: relative;
				border:none;
				background: transparent;
				width: 100%;
				.box-shadow(~"none");

				li {
					margin: 0 -15px;
					a {white-space: inherit;}
					&.divider {margin: 5px -15px;}
				}

				i.pull-right {margin-top:2px;}
			}
		}
	}
	&.search {
		width: 280px;
		padding: 0;
		input[type="text"] {border:none;height: 38px;}
	}
}

#headerbardropdown {
	padding: 7px 12px;
	span {background-color: rgba(255,255,255,0.15); padding: 2px 8px 3px 8px; display: block;border-radius:@border-radius-small}
	i {margin-left: 0px;}
	&:hover span {background-color: rgba(255,255,255,0.25);}
}

.toolbar.navbar-nav           {margin: 0;}
.navbar-nav .dropdown-toggle  {padding-top: 10px; padding-bottom: 10px;font-size:14px;}
.navbar-nav.toolbar>li        {float: right;}


a.username {
	padding: 8px 10px !important;
	font-size: 12px !important;
	.clearfix();
	span {
		padding-right: 10px;
	    //Visual Alignment
	    top:2px;
	    position: relative;
	    float: left;
	}
	img {
		height: 24px;
		width: 24px;
		float: right;
		border-radius: @border-radius-small;
	}
}

.dropdown-menu.userinfo .username a {
	.clearfix();
	padding: 0;
	color: @gray-darker;
	&:hover {text-decoration: none;background: none;}
}

header.navbar {margin-bottom:0px; border:none;}

/* Nav and Sidebar Badges
// ------------------------*/

.nav .badge, #sidebar .badge {
	text-align: center;
	text-shadow: none !important;
}

.nav .badge {
	top: 4px;
	left: 22px;
	position: absolute;

	background-color: @brand-danger;
}

#sidebar .badge {
	float: right;

	position: absolute;
  	top: 11px;
  	right: 30px;
}

/* The toggle links for left/right sidebar */
.navbar .btn {font-size: 1em; padding: 5px;}
.navbar .btn.pull-left {border-right: 1px solid #555; margin-right: 10px;}
.navbar .btn.pull-right {border-left: 1px solid #555; margin-left: 10px}


/* Menu Triggers */
#leftmenu-trigger, #rightmenu-trigger {
	height: 40px; width: 40px; cursor: pointer;
	background-image: url();
}
#leftmenu-trigger {
	background-position: 0 0; float: left;
	&:hover {background-position: 0 40px;}
}
#rightmenu-trigger {
	background-position: 39px 0; float: right;
	&:hover {background-position: 39px 40px;}
}

@media (max-width: @screen-xs-max) {
	//Alignments in small screen
	.dropdown-menu.messages {
		margin-right: -35px;
		&:before {margin-right: 35px;}
	}
	.dropdown-menu.notifications {
		margin-right: -85px;
		&:before {margin-right: 85px;}
	}

	// Menu Horizontal
	nav.navbar .dropdown-menu {
		position: relative;
		float: none;
		background: none;
		.box-shadow(~"none");
		border:none;
	}
	nav.navbar .navbar-header {width: auto;}
}

nav.navbar {margin-bottom: 0;}

